<script setup lang="ts">
import { getCurrentInstance, reLaunch } from '@tarojs/taro';
import { Check as AppNutIconCheck } from '@nutui/icons-vue-taro';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
  from?: string;
  assetId?: string;
};

/**
 * 跳转列表页面
 */
function jumpToListPage() {
  if (params.from && params.from === 'scan') {
    reLaunch({
      url: `/pages/scan/work-order/list/index?assetId=${params.assetId}`,
    });
  } else {
    reLaunch({
      url: '/pages/work-order/list/index',
    });
  }
}
</script>

<template>
  <view class="work-order-process-success app-page--1">
    <app-navbar title="工单完成" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="work-order-process-success__header-wrapper">
        <app-nut-icon-check class="work-order-process-success__icon" />
      </view>
      <view>工单已完成!</view>
    </scroll-view>

    <view class="work-order-process-success__footer">
      <nut-button
        class="work-order-process-success__footer-btn"
        plain
        shape="round"
        type="info"
        @click="
          reLaunch({
            url: `/pages/work-order/detail/index?id=${params.id}`,
          })
        "
      >
        工单详情
      </nut-button>
      <nut-button
        class="work-order-process-success__footer-btn"
        shape="round"
        type="info"
        @click="jumpToListPage"
      >
        工单列表
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
.work-order-process-success {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  color: #333;

  &__header-wrapper {
    font-size: 38px;
    margin-top: 5vh;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon {
    font-size: 72px;
    font-weight: bolder;
    color: #27c530;
    margin-bottom: 20px;
  }

  &__footer {
    padding: 20px 10px;
    background-color: #fff;
    display: flex;
  }

  &__footer-btn {
    flex: 1;
    margin: 0 10px !important;
    border-radius: 8px !important;
  }
}
</style>
